<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .bigdiv,
        table,
        h1,
        form,
        .div {
            margin: 10px auto 10px auto;
            text-align: center;
        }

        .div {
            width: 685px;
            height: 40px;
            background-color: rgba(134, 134, 134, 0.348);
            text-align: center;
            line-height: 40px;
        }

        table {
            border-collapse: collapse;
            height: 80px;
            text-align: center;
        }

        thead {
            height: 50px;
            background-color: rgba(221, 219, 219, 0.629);
        }

        table,
        th,
        td {
            border: 1px solid black;
        }

        th {
            padding: 5px 30px;
        }

        .add {
            width: 60px;
            height: 25px;
            background-color: rgb(191, 191, 224);
            border: 1px solid black;
            border-radius: 5px;
        }

        input,
        select {
            height: 25px;
            border: 1px solid black;
            border-radius: 5px;
        }
    </style>
</head>

<body>
    <div class="bigdiv">
        <h1>动漫角色榜</h1>
        <form action="" class="form">
            <input type="text" class="uname" name="unname" placeholder="角色名">
            <input type="text" class="age" name="age" placeholder="年龄">
            <input type="text" class="belong" name="belong" placeholder="录入时间">

            <select name="sex" class="sex">
                <option value="男" selected>男</option>
                <option value="女">女</option>
            </select>
            <select name="city" class="city">
                <option value="画江湖之不良人" selected>画江湖之不良人</option>
                <option value="斗破苍穹">斗破苍穹</option>
                <option value="刺客伍六七">刺客伍六七</option>
                <option value="斗罗大陆">斗罗大陆</option>
                <option value="吞噬星空">吞噬星空</option>
                <option value="凡人修仙传">凡人修仙传</option>
                <option value="凡人修仙传">凡人修仙传</option>
            </select>
            <button class="add">添加</button>
        </form>
        <div class="div"></div>
        <table>
            <thead>
                <th>ID</th>
                <th>角色名</th>
                <th>年龄</th>
                <th>录入时间</th>
                <th>性别</th>
                <th>剧名</th>

                <th>操作</th>

            </thead>
            <tbody>
                <!-- <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td>
                        <a href="">删除</a>
                    </td>
                </tr> -->
            </tbody>
        </table>
    </div>
    <script>
        arra = [
            {
                id: 1,
                uname: 'hhb'
                , age: 17,
                sex: '男',
                city: 'fj',
                belong: 2000,
                // id: arr.length + 1,
                // uname: uname.value,
                // age: age.value,
                //  belong: belong.value,
                // sex: sex.value,
                // city: city.value

            }
        ]
        let uname = document.querySelector('.uname')
        let age = document.querySelector('.age')

        let belong = document.querySelector('.belong')

        let sex = document.querySelector('.sex')
        let tbody = document.querySelector('tbody')

        let city = document.querySelector('.city')

        // localStorage.setItem('data', JSON.stringify(arr))

        let arr = JSON.parse(localStorage.getItem('data')) || []


        let form = document.querySelector('.form')
        form.addEventListener('submit', function (e) {
            e.preventDefault()

            if (!uname.vlaue && !age.value && !belong.value) {
                return alert('不能为空！')
            }
            arr.push({

                id: arr.length ? arr[arr.length - 1].id + 1 : 1,
                uname: uname.value,
                age: age.value,
                belong: belong.value,
                sex: sex.value,
                city: city.value
            })
            // console.log(arr);
            //清空表单
            this.reset()
            adds()
            //存储数据
            localStorage.setItem('data', JSON.stringify(arr))
        })
        function adds() {
            let arrs = arr.map(function (i, k) {
                return `
             <tr>
                    <td>${i.id}</td>
                    <td>${i.uname}</td>
                    <td>${i.age}</td>
                    <td>${i.belong}</td>
                    <td>${i.sex}</td>
                    <td>${i.city}</td>
                    
                    <td>
                        <a href="javascript:" data-id=${k}>删除</a>
                    </td>
                    </tr>`
            })
            console.log(arrs);
            tbody.innerHTML = arrs.join('');
            document.querySelector('.div').innerHTML = `共有${arr.length}条数据..`


        }
        //关键渲染一次刷星不会没有数据
        adds()
        tbody.addEventListener('click', function (e) {
            if (e.target.tagName === 'A') {
                arr.splice(e.target.dataset.id, 1)
                adds()
                localStorage.setItem('data', JSON.stringify(arr))
            }
        })
       
        console.log( new Date().toLocaleDateString());//2023/5/29
        console.log(new Date().toLocaleString());//2023/5/29 15:21:32
        console.log(new Date().toLocaleTimeString());//15:21:32

    </script>
</body>

</html>